<template>
  <div class="nowHourse">
    <Row :gutter="16" style="margin-bottom:15px">
      <Input @on-keyup.enter="search" v-model="searchInfo" placeholder="商品名称或条形码" style="width: 300px;float:right">
      <Button slot="append" icon="ios-search"></Button>
      </Input>
    </Row>
    <Row :gutter="16" style="margin-bottom:10px">
      <i-table ref="table" :content="self" :columns="columns" :data="data"></i-table>
    </Row>
    <Row :gutter="16" class="page">
      <Page style="float:right" show-total :current.sync="current" :total="dataCount" :page-size="10" @on-change="changepage" show-elevator></Page>
    </Row>
  </div>
</template>

<script>
import hourse from '@/api/hourse.js'
export default {
  name: "nowHourse",
  data() {
    return {
      searchInfo: "",
      self: this,
      dataCount: 0,
      current: 1,
      data: [],
      columns: [
        {
          title: "商品名称",
          key: "name"
        },
        {
          title: "规格",
          key: "specification"
        },
        {
          title: "单位",
          key: "unit"
        },
        {
          title: "生产厂商",
          key: "provider"
        },
        {
          title: "零售价(￥)",
          key: "sellPrice"
        },
        {
          title: "成本价(￥)",
          key: "costPrice"
        },
        {
          title: "生产日期",
          key: "productTime",
          render: (h, { row }) => h("p", row.productTime.split(" ")[0])
        },
        {
          title: "过期时间",
          key: "overTime",
          render: (h, { row }) => h("p", row.overTime.split(" ")[0])
        },
        {
          title: "剩余数量",
          key: "num",
          render: (h, { row }) => h("p", row.num + row.unit)
        }
      ]
    };
  },
  methods: {
    search() {
      this.changepage()
    },
    changepage() {
      hourse
        .drugList({
          pageIndex: this.current,
          pageSize: 10,
          name:this.searchInfo
        })
        .then(({ data }) => {
          this.dataCount = data.total;
          this.data = data.records;
        });
    }
  },
  mounted() {
    this.changepage()
  }
};
</script>

<style lang="less" scoped>
.nowHourse {
}
</style>
